<!--
选择优先级
value           =====>   双向数据绑定，v-model
fieldNames      =====>   可选择的列表项，label，value可自定义显示文字和双向绑定的数据值
-->
<template>
  <a-popconfirm placement="bottom" icon="">
    <template #title>
      <div class="base-flex base-rows base-align-items-center">
        <div :class="['item', 'item-'+index]" v-for="(item, index) in fieldNames" :key="index" @click="onClick(item)">{{ item.label }}</div>
      </div>
    </template>
    <template #okButton></template>
    <template #cancelButton></template>
    <span :class="['no-margin', 'item', 'item-' + defaultIndex]">{{ defaultLabel }}</span>
  </a-popconfirm>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
const emit = defineEmits(['update:value'])
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  fieldNames: {
    type: Array,
    default() {
      return [
        {value: 'high', label: '高'},
        {value: 'medium', label: '中'},
        {value: 'low', label: '低'},
        {value: 'none', label: '无'}
      ]
    }
  }
})
const defaultValue = ref('none')

const defaultIndex = computed(() => {
  return props.fieldNames.findIndex(item => item.value === defaultValue.value)
})

const defaultLabel = computed(() => {
  return props.fieldNames.find(item => item.value === defaultValue.value).label;
})

watch(() => props.value, (curr, old) => {
  defaultValue.value = curr
})

onMounted(() => {
  defaultValue.value = props.value ? props.value : 'none'
})

const onClick = (item) => {
  emit('update:value', item.value)
}

</script>

<style lang="scss" scoped>
.item {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  margin: 10px;
  cursor: pointer;
  &.no-margin {
    margin: 0;
  }
  &.item-0 {
    background: #ff5630;
  }
  &.item-1 {
    background: #ffab00;
    //background: #d46b08;
  }
  &.item-2 {
    background: #36b37e;
    //background: #389e0d;
  }
  &.item-3 {
    background: #dfe1e6;
  }
}
</style>
